<template>
  <div id='app'>
    <h1 style="text-align: left">{{ companyName }}</h1>
    <div style="text-align: left">
      <el-form :inline="true" :model="queryParam" size="medium">
        <el-form-item label="工作名称">
          <el-input v-model="queryParam.jobName" placeholder="请输入工作名称" style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="学历要求">
          <el-select v-model.number="queryParam.degree" clearable placeholder="请选择最高学历" style="width:150px">
            <el-option label="初中" :value=0></el-option>
            <el-option label="高中" :value=1></el-option>
            <el-option label="本科" :value=2></el-option>
            <el-option label="研究生" :value=3></el-option>
            <el-option label="博士" :value=4></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作城市">
          <el-select v-model="queryParam.city" clearable placeholder="请选择工作城市" style="width:150px">
            <el-option label="广州" value="广州"></el-option>
            <el-option label="珠海" value="珠海"></el-option>
            <el-option label="深圳" value="深圳"></el-option>
            <el-option label="中山" value="中山"></el-option>
            <el-option label="肇庆" value="肇庆"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作类型">
          <el-autocomplete
              v-model="queryParam.jobTypeName"
              popper-class="my-autocomplete"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入工作类型">
            <template slot-scope="{ item }">
              <span>{{ item.id }} --- {{ item.value }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>

        <el-form-item label="工资范围">
          <el-input placeholder="请输入工资范围" v-model.number="queryParam.startSalary" style="width: 150px;"
                    oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.'))}"></el-input>
          <span> - </span>
          <el-input placeholder="请输入工资范围" v-model.number="queryParam.endSalary" style="width: 150px;"
                    oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.'))}"></el-input>
        </el-form-item>
        <br>
        <span>工作标签:   </span>
        <el-tag
            v-for="tag in tags"
            @click.native="myLabel(tag.name)"
            :key="tag.name"
            :type="tag.type">
          {{ tag.name }}
        </el-tag>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <el-form-item label="总数">
          <el-switch
              @change="myList()"
              v-model="queryParam.isCount"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="myList()" icon="el-icon-search">查询</el-button>
          <el-button @click="clearQueryForm()" icon="el-icon-delete">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top: 20px;">
      <el-table v-loading="listLoading"
                :data="result.list"
                border
                :header-cell-style="headClass"
                :cell-style="rowClass"
                style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="工作ID:">
                <span>{{ props.row.jobId }}</span>
              </el-form-item>
              <el-form-item label="工作名称:">
                <span>{{ props.row.jobName }}</span>
              </el-form-item>
              <el-form-item label="工作类型:">
                <span>{{ props.row.jobTypeName }}</span>
              </el-form-item>
              <el-form-item label="企业名称:">
                <span>{{ props.row.companyName }}</span>
              </el-form-item>
              <el-form-item label="工资待遇:">
                <span>{{ props.row.salary }}</span>
              </el-form-item>
              <el-form-item label="学历要求:">
                <span v-if="props.row.degree===0">初中</span>
                <span v-if="props.row.degree===1">高中</span>
                <span v-if="props.row.degree===2">本科</span>
                <span v-if="props.row.degree===3">研究生</span>
                <span v-if="props.row.degree===4">博士</span>
              </el-form-item>
              <el-form-item label="工作标签:">
                <span>{{ props.row.label }}</span>
              </el-form-item>
              <el-form-item label="工作城市:">
                <span>{{ props.row.city }}</span>
              </el-form-item>
              <el-form-item label="招募人数:">
                <span>{{ props.row.recruitNumber }}</span>
              </el-form-item>
              <el-form-item label="浏览数量:">
                <span>{{ props.row.viewNum }}</span>
              </el-form-item>
              <el-form-item label="详细地址:">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="工作介绍:">
                <span>{{ props.row.message }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            prop="jobName"
            label="工作名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="salary"
            label="工资待遇"
            width="180">
        </el-table-column>
        <el-table-column
            prop="degree"
            label="学历要求"
            width="180">
          <template slot-scope="scope">
            <div v-if="scope.row.degree===0">
              <span>初中</span>
            </div>
            <div v-if="scope.row.degree===1">
              <span>高中</span>
            </div>
            <div v-if="scope.row.degree===2">
              <span>本科</span>
            </div>
            <div v-if="scope.row.degree===3">
              <span>研究生</span>
            </div>
            <div v-if="scope.row.degree===4">
              <span>博士</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="jobTypeName"
            label="工作类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="label"
            label="工作标签"
            width="180">
        </el-table-column>
        <el-table-column
            prop="companyName"
            label="企业名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="city"
            label="工作城市"
            width="180">
        </el-table-column>
        <el-table-column
            v-if="this.user.userType===1"
            label="操作">
          <template slot-scope='scope'>
            <el-button type="primary" size="mini" @click='open(scope.row)'>投递</el-button>
            <el-button type="primary" size="mini" @click='open2(scope.row)'>评论</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!-- 底栏容器 -->
      <el-footer style="text-align: left;">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParam.pageNum"
            :page-sizes="[10,20,30,40,50,100,200,500,1000]"
            :page-size="queryParam.pageSize"
            :layout="queryParam.isCount ? 'total, sizes, prev, pager, next, jumper' : 'sizes, prev, next'"
            :total="result.totalNum">
        </el-pagination>
      </el-footer>
    </div>
  </div>
</template>

<script>
import {getCompanyJobs, getCompanyJobsLabel, getJobTypeByName, postCreateRemark, postDeliveryJob} from "@/api";
import jwtUtil from "jwt-decode";

export default {
  name: "readCompanyJobs",
  data() {
    return {
      user: {
        userId: '',
        objectId: '',
        userType: ''
      },
      listLoading: false,
      jobTypeNames: [],
      companyName: '',
      deliveryReqDTO: {
        jobId: '',
        seekerId: '',
        message: ''
      },
      remarkReqDTO: {
        jobId: '',
        seekerId: '',
        message: ''
      },
      queryParam: {
        pageSize: 10,
        pageNum: 1,
        isCount: false,
        jobName: '',
        jobTypeName: '',
        startSalary: '',
        endSalary: '',
        degree: '',
        city: '',
        companyId: '',
        label: ''
      },
      result: {
        list: [],
        totalNum: -1
      },
      tags: []
    }
  }, methods: {
    //组件方法
    headClass() {
      return "text-align:center"
    },
    rowClass() {
      return "text-align:center"
    },
    clearQueryForm() {
      this.queryParam.jobName = undefined
      this.queryParam.jobTypeName = undefined
      this.queryParam.startSalary = undefined
      this.queryParam.endSalary = undefined
      this.queryParam.degree = undefined
      this.queryParam.city = undefined
      this.queryParam.orderBy = 0
      this.queryParam.isCount = false
    },
    handleSizeChange(val) {
      this.queryParam.pageSize = val
      this.myList()
    },
    handleCurrentChange(val) {
      this.queryParam.pageNum = val
      this.myList()
    },
    querySearchAsync(queryString, callback) {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        getJobTypeByName(queryString)
            .then(res => {
              this.jobTypeNames = []
              res.data.list.forEach(it => {
                this.jobTypeNames.push({'value': it.jobTypeName, id: it.id})
              })
              callback(this.jobTypeNames);
            })
      }, 1000 * Math.random());
    },
    //执行方法
    myList() {
      this.listLoading = true
      getCompanyJobs(this.queryParam).then(res => {
        this.result.list = res.data.list
        this.result.totalNum = res.data.totalNum
        this.listLoading = false
      })
    },
    myLabel(item) {
      if (item === '全部') {
        this.queryParam.label = null
      } else {
        this.queryParam.label = item
      }
      this.myList()
    },
    open(item) {
      this.$prompt('请输入招呼语', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        this.deliveryReqDTO.jobId = item.jobId
        this.deliveryReqDTO.seekerId = this.user.objectId
        this.deliveryReqDTO.message = value

        postDeliveryJob(this.deliveryReqDTO).then(() => {
          this.$message.success('岗位投递成功')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    open2(item) {
      this.$prompt('请输入评论内容', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        this.remarkReqDTO.jobId = item.jobId
        this.remarkReqDTO.seekerId = this.user.objectId
        this.remarkReqDTO.message = value

        postCreateRemark(this.remarkReqDTO).then(() => {
          this.$message.success('评论发表成功')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
  },
  created() {
    this.user = jwtUtil(window.localStorage.getItem('Token'))

    this.queryParam.companyId = this.$route.query.id
    this.companyName = this.$route.query.companyName

    getCompanyJobsLabel(this.$route.query.id).then(res => {
      this.tags = []
      this.tags.push({name: '全部', type: ''})
      console.log(res.data.list)
      res.data.list.forEach(it => {
        if (it !== '') {
          this.tags.push({name: it, type: ''})
        }
      })

    })
  },
  mounted() {
    window.app = this;
  },
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>